<template>
	<div class="type">
		<div class="header vux-1px-b" v-show="false">
			<div @click="colseWin" class="iconfont back-icon">&#xe624;</div>
			选择类型
		</div>
		<div class="content" id="heade">

			<router-link tag="div" to="/shoplist" class="content-item">
				<div class="title title2">实体商户</div>
				<div class="desc"><p>用于服务类O2O类企业及线下门店 推荐线下门店及美团、点评商户使用</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</router-link>
			<div class="content-item" @click="toStore('onlinestore')">
				<div class="title title3">线上电商</div>
				<div class="desc"><p>打造售卖实体及虚拟商品 推荐天猫等平台</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>
			<router-link to="/manufactor" tag="div" class="content-item">
				<div class="title title7">原厂直销</div>
				<div class="desc"><p>适合厂家、工厂批发/直销等企业(目前仅支持阿里1688平台厂家认领)</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</router-link>
			<!--<div class="content-item">
				<div class="title title4">宝店客</div>
				<div class="desc"><p>完成其它电商平台商户在阿宝平台的店铺创建，方便商户认领</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>-->
			<div class="content-item" @click="toStore('media')">
				<div class="title title1">媒体运营</div>
				<div class="desc"><p>用于媒体内容发布,将内容和流量进行变现,推荐公众号及头条号、百家号等自媒体使用。</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>
			<router-link tag="div" :to="{path:'/selfOpen',query:{type:2}}" class="content-item">
				<div class="title title5">微商创业</div>
				<div class="desc">代销产品，利用平台流量免费传播，再也不会被拉黑</div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</router-link>
			<!--<div class="content-item">
				<div class="title title6">其它</div>
				<div class="desc">个人 企业 政府机构等创建主页，展示政府 企业 及个人信息</div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>-->
		</div>
	</div>
</template>

<script>
	import {getUrlParam}  from '@/assets/js/getUrlParam' 
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	export default{
		name : 'type',
		data(){
			return{
				isWeChat : true
			}
		},
		methods:{
			colseWin(){
				let direct = getUrlParam('direct')
				
				//直接关闭浏览器
				if(!this.hasPrevPage){				
					this.$closeWin()
					return
				}
				//后退一步
				else{
					this.$router.go(-1)
				}
				//直接关闭浏览器
//				if(direct){
//					this.$closeWin()
//				}
//				//后退一步
//				else{
//					this.$router.go(-1)
//				}
				
			},
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	document.getElementById('heade').style.marginTop = .2 + 'rem'
			    } else {
			        this.isWeChat = true
			    }
			},
			toStore(type){
				this.$router.push({path:'/coinShopList',query:{type:type}})
			}
		},
		mounted(){
			removeCookie('key')
			document.title = '选择类型'
			this.isWeiXin()
		}
	}
</script>

<style lang="less" scoped> 
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';
	.type{
		text-align: left;
		.header{
			z-index:99;
			position: fixed;
			top:0;
			left:0;
			right:0;
			height: 1.44rem;
			line-height: 2rem;
			text-align: center;
			font-size: .36rem;
			background:#f7f7f8;
			.iphonex;
			.back-icon{
				position: absolute;
				top: .54rem;
				height: .9rem;
				line-height: .9rem;
				padding: 0 .2rem;
			}
		}
		.split{
			height: 1.44rem;
		}
		.content{
			margin-top: .1rem;
			.content-item{
				overflow: hidden;
				position: relative;
				margin: .1rem auto;
				display: flex;
				width: 90%;
				height: 2rem;
				line-height:2rem;
				border-radius:.1rem;
				background:#fff;				
				.title{
					text-align: center;
					width: 2rem;
					color: #fff;
					font-size: .32rem;
				}
				.title1{
					background:linear-gradient(top,#fd6d6d,#ee2205);
					background:-webkit-linear-gradient(top,#fd6d6d,#ee2205);
				}
				.title2{
					background:linear-gradient(top,#4ae1fa,#0671ff);
					background:-webkit-linear-gradient(top,#4ae1fa,#0671ff);
				}
				.title3{
					background:linear-gradient(top,#ffdf30,#ff6504);
					background:-webkit-linear-gradient(top,#ffdf30,#ff6504);
				}
				.title4{
					background:linear-gradient(top,#e440ff,#7d05fd);
					background:-webkit-linear-gradient(top,#e440ff,#7d05fd);
				}
				.title5{
					background:linear-gradient(top,#10fabe,#01e70e);
					background:-webkit-linear-gradient(top,#10fabe,#01e70e);
				}
				.title6{
					background:linear-gradient(top,#fd35ee,#f604ae);
					background:-webkit-linear-gradient(top,#fd35ee,#f604ae);
				}
				.title7{
					background:linear-gradient(top,#358ffd,#040bf6);
					background:-webkit-linear-gradient(top,#358ffd,#040bf6);
				}
				.desc{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height:.32rem;
					padding: 0 .42rem 0 .2rem;
					font-size: .24rem;
				}
				.link-icon{
					height: .24rem;
					width: .24rem;
					line-height: .24rem;
					position: absolute;
					top: 50%;
					right: .15rem;
					margin-top: -.12rem;
					color: #ccc;
				}
			}
		}
	}
</style>